import React, {ReactNode, useEffect} from "react";
import {DragSourceMonitor, useDrag} from "react-dnd";
import Icon from "@ant-design/icons";
import {getEmptyImage} from "react-dnd-html5-backend";

export const ShuIcon = () => <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
  <path
    d="M365.715571 438.863286a73.142214 73.142214 0 1 1 0-146.284429 73.142214 73.142214 0 0 1 0 146.284429z m0 292.568857a73.142214 73.142214 0 1 1 0-146.284429 73.142214 73.142214 0 0 1 0 146.284429z m0 292.567857a73.142214 73.142214 0 1 1 0-146.284429 73.142214 73.142214 0 0 1 0 146.284429z m292.568858-877.704572a73.142214 73.142214 0 1 1 0-146.284428 73.142214 73.142214 0 0 1 0 146.284428z m0 292.567858a73.142214 73.142214 0 1 1 0-146.284429 73.142214 73.142214 0 0 1 0 146.284429z m0 292.568857a73.142214 73.142214 0 1 1 0-146.284429 73.142214 73.142214 0 0 1 0 146.284429z m0 292.567857a73.142214 73.142214 0 1 1 0-146.284429 73.142214 73.142214 0 0 1 0 146.284429zM365.715571 146.295428a73.142214 73.142214 0 1 1 0-146.284428 73.142214 73.142214 0 0 1 0 146.284428z"/>
</svg>

export const HengIcon = () => <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
  <path
    d="M1024 634.311c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM722.489 634.311c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM420.978 634.311c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733 0-31.289 0 0 0 0zM119.467 634.311c0-34.133-25.6-59.734-59.733-59.733-34.133 0-59.734 28.444-59.733 59.733 0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733 0-31.289 0 0 0 0zM1024 372.622c0-31.289-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM722.489 372.622c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM420.978 372.622c0-34.133-25.6-59.734-59.733-59.733s-59.734 28.444-59.733 59.733c0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733zM119.467 372.622c0-34.133-25.6-59.734-59.733-59.733-34.133 0-59.734 28.444-59.733 59.733 0 34.133 25.6 59.734 59.733 59.733 34.133 2.844 59.734-25.6 59.733-59.733z"/>
</svg>

export const FullScreen = () => <svg viewBox="0 0 1024 1024" version="1.1"
                                     fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
  <path
    d="M704 1024v-128h192v-192h128v320h-320z m192-808.064L215.936 896H448v128H0V576h128v232.064L808.064 128H576V0h448v448h-128V215.936zM128 320H0V0h320v128H128v192z"
  ></path>
</svg>
export const ExitFullScreen = () => <svg viewBox="0 0 1024 1024" version="1.1"
                                         fill="currentColor"
                                         xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
  <path
    d="M422.648199 431.157895c5.67313 0 8.509695-2.836565 11.346261-5.67313 2.836565-2.836565 5.67313-8.509695 5.67313-11.346261V51.058172c0-2.836565 0-5.67313-2.836565-5.67313h-5.67313L306.34903 170.193906 141.828255 5.67313C138.99169 2.836565 133.31856 0 130.481994 0c-5.67313 0-11.34626 2.836565-14.182825 5.67313L5.67313 116.299169c-2.836565 2.836565-5.67313 8.509695-5.67313 11.34626 0 5.67313 2.836565 11.34626 5.67313 14.182826L170.193906 303.512465l-119.135734 119.135734c-2.836565 2.836565-2.836565 2.836565 0 5.673131 0 2.836565 2.836565 2.836565 5.67313 2.836565h365.916897z m0 156.01108c5.67313 0 8.509695 2.836565 11.346261 5.67313 2.836565 2.836565 5.67313 8.509695 5.67313 11.346261v365.916897c0 2.836565 0 5.67313-2.836565 5.67313h-5.67313L306.34903 850.969529 141.828255 1015.490305c-2.836565 2.836565-8.509695 5.67313-11.346261 5.67313-5.67313 0-8.509695-2.836565-11.34626-5.67313L8.509695 904.864266c-5.67313-2.836565-8.509695-8.509695-8.509695-11.34626s2.836565-8.509695 5.67313-11.346261L170.193906 717.65097l-119.135734-119.135735c-2.836565-2.836565-2.836565-2.836565 0-5.67313 0-2.836565 2.836565-2.836565 5.67313-2.836565l365.916897-2.836565z m175.867036-156.01108c-5.67313 0-8.509695-2.836565-11.34626-5.67313-2.836565-2.836565-5.67313-8.509695-5.67313-11.346261V51.058172c0-2.836565 0-5.67313 2.836565-5.67313h5.67313L714.814404 170.193906 879.33518 5.67313c2.836565-2.836565 8.509695-5.67313 11.34626-5.67313 5.67313 0 8.509695 2.836565 11.346261 5.67313l110.626039 110.626039c5.67313 2.836565 8.509695 8.509695 8.509695 11.34626 0 5.67313-2.836565 8.509695-5.67313 11.346261L850.969529 303.512465l119.135734 119.135734c2.836565 2.836565 2.836565 2.836565 0 5.673131 0 2.836565-2.836565 2.836565-5.67313 2.836565H598.515235z m0 156.01108c-5.67313 0-8.509695 2.836565-11.34626 5.67313-2.836565 2.836565-5.67313 8.509695-5.67313 11.346261v365.916897c0 2.836565 0 5.67313 2.836565 5.67313h5.67313l121.972299-121.972299 164.520776 164.520776c2.836565 2.836565 8.509695 5.67313 11.34626 5.67313 5.67313 0 8.509695-2.836565 11.346261-5.67313l110.626039-110.626039c2.836565-2.836565 5.67313-8.509695 5.67313-11.34626s-2.836565-8.509695-5.67313-11.346261L850.969529 717.65097l119.135734-119.135735c2.836565-2.836565 2.836565-2.836565 0-5.67313 0-2.836565-2.836565-2.836565-5.67313-2.836565l-365.916898-2.836565z"></path>
</svg>
export const RightIcon = () => <svg viewBox="0 0 1024 1024" version="1.1"
                                fill='currentColor'
                                xmlns="http://www.w3.org/2000/svg" p-id="3332" width="1em" height="1em">
  <path
    d="M724.48 521.728c-1.8432 7.7824-5.7344 14.848-11.3664 20.48l-341.9136 342.016c-16.6912 16.6912-43.7248 16.6912-60.3136 0s-16.6912-43.7248 0-60.3136L622.6944 512 310.8864 200.0896c-16.6912-16.6912-16.6912-43.7248 0-60.3136 16.6912-16.6912 43.7248-16.6912 60.3136 0l341.9136 341.9136c10.8544 10.8544 14.6432 26.112 11.3664 40.0384z"></path>
</svg>
export const LeftIcon = () => <svg viewBox="0 0 1024 1024" version="1.1"
                               fill='currentColor'
                               xmlns="http://www.w3.org/2000/svg" p-id="3332" width="1em" height="1em">
  <path
    d="M299.52 521.728c-3.2768-13.9264 0.512-29.184 11.3664-40.0384l341.9136-341.9136c16.6912-16.6912 43.7248-16.6912 60.3136 0s16.6912 43.7248 0 60.3136L401.3056 512l311.9104 311.9104c16.6912 16.6912 16.6912 43.7248 0 60.3136s-43.7248 16.6912-60.3136 0l-342.016-341.9136c-5.632-5.632-9.6256-12.8-11.3664-20.5824z"
    fill="#323233" p-id="3468"></path>
</svg>
export const UpIcon = () => <svg viewBox="0 0 1024 1024" version="1.1"
                             fill='currentColor'
                             xmlns="http://www.w3.org/2000/svg" p-id="3332" width="1em" height="1em">
  <path
    d="M521.728 299.52c7.7824 1.8432 14.848 5.7344 20.48 11.3664l341.9136 341.9136c16.6912 16.6912 16.6912 43.7248 0 60.3136s-43.7248 16.6912-60.3136 0L512 401.3056 200.192 713.1136c-16.6912 16.6912-43.7248 16.6912-60.3136 0-16.6912-16.6912-16.6912-43.7248 0-60.3136l341.9136-341.9136c10.752-10.8544 26.0096-14.6432 39.936-11.3664z"
    fill="#323233" p-id="3603"></path>
</svg>
export const DownIcon = () => <svg viewBox="0 0 1024 1024" version="1.1"
                             fill='currentColor'
                             xmlns="http://www.w3.org/2000/svg" p-id="3332" width="1em" height="1em">
  <path d="M502.272 724.48c-7.7824-1.8432-14.848-5.7344-20.48-11.3664l-342.016-341.9136c-16.6912-16.6912-16.6912-43.7248 0-60.3136 16.6912-16.6912 43.7248-16.6912 60.3136 0L512 622.6944l311.808-311.808c16.6912-16.6912 43.7248-16.6912 60.3136 0s16.6912 43.7248 0 60.3136L542.3104 713.1136c-10.8544 10.8544-26.112 14.6432-40.0384 11.3664z" fill="#323233" p-id="3738"></path>
</svg>

export const BoxTypes = {BOX: 'box'};


export enum DragId {pos1, pos2, pos3}

export enum Direction {Vertical, Horizontal}

export interface DragDivProps {
  id: DragId;
  direction: Direction;
  size: { width: number, height: number };
  left: number;
  top: number;
  icon: ReactNode;
}

export function DragDiv(props: DragDivProps) {
  const {id, direction, size, left, top, icon} = props
  const [{isDragging}, drag, preview] = useDrag(
    () => ({
      type: BoxTypes.BOX,
      item: {id, size, direction, left, top},
      collect: (monitor: DragSourceMonitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    [id, direction, size, left, top]
  )

  useEffect(() => {
    // 加了这个 拖拽的时候 不会显示 预览 ，这样我就可以 使用 自定义的预览了 (customDragLayer)
    preview(getEmptyImage(), {captureDraggingState: true})
  }, [])

  function getStyle() {
    const cursor = direction === Direction.Vertical ? 'col-resize' : 'row-resize'
    return {
      width: size.width,
      height: size.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      background: 'white',
      cursor: cursor,
    };
  }

  return <div ref={drag} style={getStyle()}>{icon}</div>;
}
